<template>
  <cv-dialog-form
    v-model:show="add.visible.value"
    title="添加数据"
    @confirm="addDataService"
  >
    <cv-form :config="form" :data="formData"></cv-form>
  </cv-dialog-form>

  <cv-dialog-form
    v-model:show="update.visible.value"
    title="更新数据"
    @confirm="editDataService"
  >
    <cv-form :config="form" :data="formUpdate"></cv-form>
  </cv-dialog-form>
  <!-- 权限分配 -->
  <role-allot
    v-if="roleJurisdiction.visible.value"
    v-model:show="roleJurisdiction.visible.value"
    :role-id="roleId"
  ></role-allot>
  <!-- 基于element-plus二次封装的表格组件 -->
  <search @search-role="searchRoleInfo"></search>

  <cv-table
    v-model:current-page="testTable.pageConfig.page"
    :height="h * 0.5"
    :data="testTable.pageConfig.list"
    :config="tableColumn"
    :loading="testTable.loading.value"
    :page-config="testTable.pageConfig"
    @add-data="add.setVisible(true)"
    @refresh="initTable"
    @current-change="initTable"
  >
  </cv-table>
</template>

<script setup lang="ts">
import type { TableConfig, FormConfig } from '@/packages/components'
import { addReq, queryReq, pageQueryReq, updateReq } from '@/utils/http/code'
import { getMenuList } from '@/api/system'
import { useAppStore } from '@/store'
import useVisible from '@/hooks/useVisible'
import { cloneFnJSON } from '@vueuse/core'

import { useTable } from '@/hooks'
import search from './role-search.vue'

import {
  addRole,
  getRoleList,
  editRole,
  getRoleInfo,
  deleteRole,
  RoleListType,
  AddRoleType,
  EditRoleType,
} from '@/api/system/system-role'
import RoleAllot from './role-allot.vue'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);
// 搜索角色
const searchRoleInfo = async (name: string) => {
  const res = await getRoleList({
    size: testTable.pageConfig.size,
    page: testTable.pageConfig.page,
    roleName: name,
  })
  testTable.pageConfig.list = res.data.list
  testTable.pageConfig.total = res.data.total
}

/***
 * 添加角色
 */
const addDataService = (data: FormData, close: Function) => {
  const res = addRole(formData)
  //console.log(res, '添加数据')
  //关闭弹窗
  close()
  initTable()
}
/***
 * 更新角色
 */
const editDataService = async (data: EditRoleType, close: Function) => {
  const res = await editRole(data)
  initTable()
  //console.log(data, '更新数据')
  //console.log(res, 'oooo')
  //关闭弹窗
  close()
}

/**
 * 表格中的公共属性
 */
const testTable = useTable()
testTable.pageConfig.size = 8

/**
 * 弹窗的公共属性
 */
const add = useVisible()
const update = useVisible()
const roleJurisdiction = useVisible()

const h = ref(1000)

h.value = window.innerHeight

onresize = () => {
  h.value = window.innerHeight
}

/**
 * 过滤数据参数
 */
const filterData = reactive({
  name: '',
  gender: 1,
})

// 表格中的
const tableData = reactive({
  list: [] as RoleListType[],
})

const { permissionList } = useAppStore()
const roleId = ref(0)
const tableColumn = reactive<TableConfig<RoleListType>>({
  permissionList,
  columns: [
    {
      type: 'txt',
      prop: 'roleId',
      label: '角色ID',
    },
    {
      type: 'txt',
      prop: 'roleName',
      label: '角色名称',
      fixed: 'left',
      width: 150,
      callback: (row) => {
        console.log('111')
      },
    },

    {
      type: 'txt',
      prop: 'roleDesc',
      label: '角色介绍',
    },

    {
      type: 'txt',
      prop: 'sort',
      label: '排序',
    },

    {
      type: 'tag',
      prop: 'state',
      label: '状态',
      tag: [{ 1: ['success', '启用'], 0: ['danger', '禁用'] }],
    },
  ],
  action: [
    {
      type: 'other',
      title: '分配权限',
      color: 'warning',
      auth: ['sys:role:allot'],
      onClick: async (row) => {
        console.log(row)
        roleId.value = row.roleId
        roleJurisdiction.toggle()
      },
    },
    {
      type: 'edit',
      title: '编辑',
      auth: ['sys:role:update'],
      onClick: async (row) => {
        const res = await getRoleInfo(row.roleId)
        formUpdate.value = res.data
        update.toggle()
      },
    },
    {
      type: 'del',
      title: '删除',
      auth: ['sys:role:delete'],
      onClick: async (row) => {
        const res = await deleteRole(row.roleId)
        //AddOrDelete(true)

        await initTable()
      },
    },
  ],
})

// 添加里的
const formData = reactive<AddRoleType>({
  roleName: '',
  roleDesc: '',
  state: '',
  sort: '',
})

const formUpdate = ref<EditRoleType>({
  roleId: 0,
  roleName: '',
  roleDesc: '',
  state: '0',
  sort: 0,
})

/**
 *数据添加
 */
const form = reactive<FormConfig<AddRoleType>>({
  items: [
    {
      type: 'input',
      prop: 'roleName',
      label: '角色姓名',

      rules: {
        required: true,
        type: 'string',
        max: 10,
      },
    },

    {
      type: 'textarea',
      prop: 'roleDesc',
      label: '角色介绍',
      rules: { required: true },
    },

    {
      type: 'radio',
      prop: 'state',
      label: '角色状态',
      rules: { required: true },

      radio: {
        data: [
          {
            id: 0,
            name: '禁用',
          },
          {
            id: 1,
            name: '启用',
          },
        ],
        value: 'id',
        label: 'name',
      },
    },

    {
      type: 'input-number',
      prop: 'sort',
      label: '排序',
    },
  ],
})

/**
 * 加载表格数据
 */
const initTable = testTable.initTableData(async (c) => {
  const res = await getRoleList({
    ...c.page,
  })
  c.setPageData(res)
})
initTable()
</script>
<style lang="scss" scoped></style>
